<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="minimal-ui,width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>找回密码-{$webseting.web_title}</title>
    <link href="__PUBLIC__/wap/css/rest.css"  rel="stylesheet">
    <link href="__PUBLIC__/wap/css/lrstyle.css"  rel="stylesheet">
<style type="text/css">
    .hidden_class{display:none}
</style>  
</head>
<body id="fpd">
    <header id="header" class="u-header clearfix">
        <div class="u-hd-left f-left">
            <a href="javascript:history.go(-1);" class="J_backToPrev"><span class="u-icon-px i-hd-back"></span></a>
        </div>
        <div class="u-hd-tit"><span>找回密码</span></div>
    </header>

    <div class="con_box show">
        <div class="layout">
            <!-- s 流程 -->
            <div class="mod_process">
                <span class="color_red mod_title_1">1 输入账号</span>&gt;<span class="mod_title_2">2 验证身份</span>&gt;<span class="mod_title_3">3 设置新密码</span>&gt;<span class="mod_title_4">4 完成</span>
            </div>
            <!-- e 流程 -->

            <!-- s 表单 -->
             <form action="" role="form" id="form1" novalidate="novalidate" method="post" onSubmit="return false;">
            <div class="mod_forms mod_forms_1">
                <div class="forms_box">
                    <label>账号：<input id="mobile" name="mobile" type="text" placeholder="手机号" ></label>
                </div>

                <div class="mod_btn  form1_btn " style="margin-top:20px;">
                <a href="###">下一步</a>
                </div>
            </div>
            
            </form>
            <form action="" role="form" id="form2" novalidate="novalidate" method="post" onSubmit="return false;">
            <div class="mod_forms mod_forms_2 hidden_class">
                <!-- <p>请选择验证方式：</p>
                <div class="forms_box">
                    <span>手机号验证</span>
                </div> -->
                <p class="from_text"><span>您的手机号</span>：<b id="mobileOrEmail"></b></p>
                <div class="from_sms">
                    <label>短信验证码：<input type="text" id="mobile_code" name="mobile_code" placeholder="请输入验证码" ></label>
                    <a href="javascript:void(0);" class="send_sms">
                     <span class="get_sms">获取验证码</span>
                     <span class="countdown" style="display:none;">（<em class="num">60</em>S）</span>
                    </a>
                </div>

                 <div class="mod_btn   form2_btn " style="margin-top:20px;">
                <a href="###">下一步</a>
                </div>
            </div>
           </form>
            
           <form action="" role="form" id="form3" novalidate="novalidate" method="post" onSubmit="return false;">
            <div class="mod_forms mod_forms_3 hidden_class">
                <input type="hidden"  name="mobile" class="ipu_mobile" value="">
                 <input type="hidden"  name="mobile_code" class="ipu_mobile_code" value="">
                <div class="message">*密码必须为6-20位字符，由字母加符号或数字组合而成，且不能单独使用字母、符号或数字。</div>
                <div class="forms_box" id="forms_pwd">
                    <label>新密码：<input id="mem_password" name="mem_password" type="password" placeholder="请输入重复密码" ></label>
                </div>
                 <div class="forms_box"   style="margin-top:20px;">
                    <label>重复密码：<input id="rep_password" name="rep_password"  type="password" placeholder="请重复输入密码" style="width: 74%;"></label>
                </div>

                  <div class="mod_btn  form3_btn"  style="margin-top:20px;">
                <a href="###">下一步</a>
                 </div>
            </div>

          
             </form>

              <div class="mod_forms mod_forms_4 hidden_class">
               
                <div class="message message_fish" style="text-align: center;">修改成功</div>
                  <div class="mod_btn  form3_btn"  style="margin-top:20px;">
                <a href="{:U('wap/login/index')}">马上登录</a>
                 </div>
            </div>

            <!-- e 表单 -->

        </div>
    </div>
   <script src="__PUBLIC__/bootstrap/vendor/jquery/jquery.min.js"></script>

    <!--<script src="__PUBLIC__/bootstrap/vendor/jquery-validation/jquery.validate.min.js"></script>-->
    <script src="__PUBLIC__/bootstrap/vendor/jquery-validation/jquery.validate.wap.js"></script>
     <script src="__PUBLIC__/js/jquery.form.js"></script>
     <script type="text/javascript" src="__PUBLIC__/layer/layer.js"></script>
        <script>
jQuery(document).ready(function() {
                //FormValidator.init();
jQuery.validator.addMethod("byteRangeLength", function(value) {
    var dropdown=$("#dropdown").val();
    var ret=true;
    if(dropdown>0){
       if(!value){
        ret=false;
       }
    }
  return ret;   
});

$("#form1").validate({
  rules: {
   mobile: {
    required:true,
    remote: {
            url: "{:U('Wap/Login/cheack_mobile')}",
            type: "get",
            dataType: "json",
            data: {
                mobile: function () {
                    return $("#mobile").val();　　　　//这个是取要验证的数据
                }
            },
            dataFilter: function (msg) {　　　　//判断控制器返回的内容
                if (msg == "1") {
                    return true;
                }else {
                    return false;
                }
            }
        }
   }
  },
  messages: {
       mobile:{
        required:'<span class="icon-warning icon_warning"></span>&nbsp;请输入手机号码',
        remote:'<span class="icon-warning icon_warning"></span>&nbsp;手机号码未找到'
       }
  },
   focusInvalid:false,
  success: function(label) { 
            // set  as text for IE 
           // alert('ok'); 
            //label.html(" ").addClass("checked"); 
        }, 
        /*执行ajaxsubmit  */ 
        submitHandler: function(editform) { 
           //第二步 
           var mobile=$('#mobile').val();
           $('.ipu_mobile').val(mobile);
          var mobile1=mobile.substr(0,3);
           var mobile2=mobile.substr(-4,4);
             mobile=mobile1+'****'+mobile2;
           $("#mobileOrEmail").html(mobile);
            $('.mod_forms_1').addClass('hidden_class');
            $('.mod_forms_2').removeClass('hidden_class');
            $('.mod_title_1').removeClass('color_red');
            $('.mod_title_2').addClass('color_red');
        }

  });

$("#form2").validate({
  rules: {
    mobile_code: {
    required:true,
    remote: {
            url: "{:U('Wap/Login/check_send_reg')}",
            type: "get",
            dataType: "json",
            data: {
                mobile: function () {
                    return $("#mobile").val();　　　　//这个是取要验证的数据
                },
                mobile_code: function () {
                    return $("#mobile_code").val();　　　　//这个是取要验证的数据
                }
            },
            dataFilter: function (msg) {　　　　//判断控制器返回的内容
                if (msg == "1") {
                    return true;
                }else {
                    return false;
                }
            }
        }
   }
  },
  messages: {
      mobile_code: {
        required:'<span class="icon-warning icon_warning"></span>&nbsp;请输入手机验证码',
        remote:'<span class="icon-warning icon_warning"></span>&nbsp;手机验证码不正确'
       }
  },
   focusInvalid:false,
  success: function(label) { 
            // set  as text for IE 
           // alert('ok'); 
            //label.html(" ").addClass("checked"); 
        }, 
        /*执行ajaxsubmit  */ 
        submitHandler: function(editform) { 
          var mobile_code=$("#mobile_code").val()
            $('.ipu_mobile_code').val(mobile_code);
            //第三步 
            $('.mod_forms_2').addClass('hidden_class');
            $('.mod_forms_3').removeClass('hidden_class');
            $('.mod_title_2').removeClass('color_red');
            $('.mod_title_3').addClass('color_red');
        }

  });


$("#form3").validate({
  rules: {
    mem_password: {
                    required: true,
                    rangelength: [6, 20]
                },
    rep_password: {
        required: true,
        rangelength: [6, 20],
        equalTo: "#mem_password"
    }
  },
  messages: {
       mem_password: {
        required:'<span class="icon-warning icon_warning"></span>&nbsp;请输入密码',
        rangelength:'<span class="icon-warning icon_warning"></span>&nbsp;密码请保持6-20位'
       },
       rep_password: {
        required:'<span class="icon-warning icon_warning"></span>&nbsp;请输入重复密码',
        rangelength:'<span class="icon-warning icon_warning"></span>&nbsp;重复密码请保持6-20位',
        equalTo:'<span class="icon-warning icon_warning"></span>&nbsp;两次密码输入不一致'
       }
  },
   focusInvalid:false,
  success: function(label) { 
            // set  as text for IE 
           // alert('ok'); 
            //label.html(" ").addClass("checked"); 
        }, 
        /*执行ajaxsubmit  */ 
        submitHandler: function(editform) { 

            var options = { 
                url :  "<?php echo U('Wap/Login/findpwd'); ?>", 
                type : "post" , 
                dataType:'json', 
                target : "#loader", 
                error: function(){layer.msg("服务器没有返回数据，可能服务器忙，请重试",{icon:5});}, 
                onwait : "正在处理信息，请稍候...",
                success: function(response){ 
                      // console.log(response);
                    //$("#loader").fadeIn(500).html(response.data).fadeOut(500); 
                    //$('#editform').hide(2000); 
                    if(response.status==1){
                          $('.mod_forms_3').addClass('hidden_class');
                         $('.mod_forms_4').removeClass('hidden_class');
                         $('.mod_title_3').removeClass('color_red');
                         $('.mod_title_4').addClass('color_red');
                        //alert("注册成功");
                       //window.location.href=""; 
                    }else{

                       layer.msg(response.error, {icon: 5}); 
                       // alert(response.error);
                    }
                }
            };
            setTimeout((function(opt){
                return function(){
                    $('#form3').ajaxSubmit(opt);
                }
            })(options), 300); 
            return false; 
        }

  });


$("#dropdown").change(function(){
    var val=$(this).val();
    if(val>0){
        $(".menu_icons").hide();
    }else{
        $(".menu_icons").show();
    }
});
$('.form1_btn').click(function(){
    $('#form1').submit();
});
$('.form2_btn').click(function(){
    $('#form2').submit();
});
$('.form3_btn').click(function(){
    $('#form3').submit();
});
$('.form4_btn').click(function(){
    $('#form4').submit();
});

$('.send_sms').click(function(){
    var is_send=$(this).hasClass('disable');
    if(is_send){
      return false;
    }else{
        //短信发送
         $.ajax({
            url: "{:U('Wap/Login/send_sms_findpwd')}",
            type: "get",
            dataType: "json",
            data: {
                mobile: function () {
                    return $("#mobile").val();　　　　//这个是取要验证的数据
                }/*,
                verify_code: function () {
                    return $("#verify_code").val();　　　　//这个是取要验证的数据
                }*/
            },
            success: function (msg) {　　　　//判断控制器返回的内容
                if (msg.status == "1") {
                     //disable
                     //$('#mobile_code').val(msg.code);

                     layer.msg('验证码发送成功', {icon: 6});
                     //alert("验证码发送成功");
                     run_time_out();
                }else {
                  layer.msg(msg.msg, {icon: 5}); 
                   // alert(msg.msg);
                }
            }
       });
    }
});

});
function run_time_out(){
    var num=$('.num').html();
    num=parseInt(num);
    var is_send=$('.send_sms').hasClass('disable');
    if(num>0){
        $('.countdown').show();
        num--;
        $('.num').html(num);//显示倒计时
        if(!is_send){
          $('.send_sms').addClass('disable');///禁止点击
          $('.send_sms').css('cssText','background-color: #eee;color: #666;');
          $('.get_sms').hide();
        }
    }else{
       $('.countdown').hide();
       $('.num').html(60);//初始化倒计时
       $('.send_sms').removeClass('disable');///可以点击
        $('.send_sms').removeAttr('style');
       $('.get_sms').show();
      return false;
    }
    setTimeout('run_time_out()',1000); 
}
        </script>   
</body>
</html>